<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>商城商品列表</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		.newproduct {
			height: 2.65rem;

			border-bottom: .05rem solid rgba(238, 238, 238, 0.5);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 0.75rem;
			margin-top: 0.3rem;
		}

		.new_wraper {
			padding-left: 0.75rem;
			padding-right: 0.75rem;
		}

		.newproduct_left {
			background: url();
			background-repeat: no-repeat;
			background-size: auto 0.8rem;
			background-position: left center;
			padding-left: 10px;
			display: inline-block;
			font-size: 0.85rem;
			font-family: PingFangSC-Semibold;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}

		.newproduct_right span {
			font-size: 0.65rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.newproduct_list {
			/*height: 6.75rem;*/
			background: rgba(255, 255, 255, 1);
			padding: 0.5rem;
			box-sizing: border-box;

			margin-top: 0.5rem;
			border-radius: 0.4rem
		}

		.left_img {
			width: 5rem;
			margin-right: 0.75rem;
		}

		.left_img img {
			width: 5rem;
			width: 5rem;
			border-radius: 0.2rem;
		}

		.right_cont {}

		.top_title {}

		.top_title img {
			width: 1.6rem;
			height: 0.9rem;
			display: inline-block;
			transform: translateY(0.15rem);
			margin-right: 0.2rem;
		}

		.top_title {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #222222;
			line-height: 1.1rem;
			max-height: 2.2rem;
			display: inline-block;
			font-size: 0.75rem
		}

		.title {
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;

		}

		.mid_decri {
			/*display: flex;*/
		}

		.mid_decri_item {
			padding: 0 0.1rem;
			height: 0.8rem;
			line-height: 0.8rem;
			border-radius: 0.1rem;
			border: 0.03rem solid #005A93;
			background: rgba(239, 249, 255, 0.4);
			font-size: 0.5rem;
			border-radius: 0.1rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #005A93;
			/*text-align: center;*/
			float: left;
			margin-top: 0.3rem;
			margin-right: 0.25rem;
			margin-bottom: 0.4rem;
			padding-top: 0.010rem;
		}

		.clear {
			clear: both;
		}

		.now_price {
			font-size: 1.1rem;
			font-family: 'PingFangSC-Semibold';
			font-weight: 600;
			color: rgba(255, 102, 66, 1);
			line-height: 1rem;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div>
			<div class="new_wraper" v-if="info.length">
				<div class="newproduct_list flex-box-x" v-for="(vo, index) in info" tapmode
					@click="openWin_goods_detail(vo.id)">
					<div class="left_img">
						<img :src="vo.cover" alt="">
					</div>
					<div class="right_cont col-xs-x">
						<div class="top_title title" >
							<!-- <img v-if="vo.sign == '新品'" src="../../image/icon/xinpin.png" alt=""> -->
							<!-- <img v-if="vo.sign == '秒杀'" src="../../image/icon/miaosha.png" alt=""> -->
							<!-- <img v-if="vo.sign == '精品'" src="../../image/icon/tuijian.png" alt="">
								<img v-if="vo.sign == '热销'" src="../../image/icon/qingcang.png" alt="">
								<img v-if="vo.sign == '拼团'" src="../../image/icon/pintuan.png" alt="">
								<img v-if="vo.sign == '秒杀'" src="../../image/icon/miaosha.png" alt=""> -->
							{{vo.title}}
						</div>
						<div class="mid_decri" v-for="item in vo.service_name">
							<div class="mid_decri_item">{{item}}</div>
						</div>
						<section class="clear"></section>

						<div style="margin-top:0.35rem">
							<span style="font-size: .7rem;color:#005a93;">零售价:￥<span
									style="font-size:1.1rem;color:#005a93;line-height:1.35rem;">{{vo.current_price}}</span></span>

							<!-- <del style="color:rgba(153,153,153,.7);font-size: .65rem;font-weight:400;">￥{{vo.cost_price}}</del> -->
						</div>
						<div style="margin-top:0.35rem" v-if="vo.vip_price>0 && (reg_type==1 || is_vip==1)">
							<span style="font-size: .7rem;color:#E90000;">会员价:￥<span
									style="font-size:1.2rem;color:#e90000;line-height:1.35rem;">{{price_format('yuan',vo.vip_price)}}</span><span
									class="" style="font-size:0.9rem;">.{{price_format('fen',vo.vip_price)}}</span><span
									style="font-size:.65rem">/{{vo.unit_name}}</span></span>

						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="info.length<1" class="aui-text-center" style="margin-top: 40%;">
			<img src="../../image/bg/bg-nomessage.png"
				style="margin-left:50%;transform:translateX(-50%);width:7.55rem;margin-bottom:1.35rem" />
			<div class="aui-margin-t-10"
				style="font-size:0.75rem;font-family:PingFangSC-Regular;font-weight:400;color:#B3B3B3;;">
				暂无内容
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			reg_type: 0,
			is_vip: 0,
			id: 0,
			page: 1,
			loadmore: true,
			info: [],
			localcity: { "id": 2608, "parentid": 235, "categoryname": "平邑县", "spell": "pingyixian", "first_letter": "P" }
		},
		methods: {
			get_list: function () {
				get_data('api/good/goodlist', {
					good_type_id: vm.id,
					page: vm.page,
					region_name: vm.localcity.categoryname
				}, function (ret) {
					if (ret.status) {
						vm.good_sign = ret.good_sign
						if (ret.data.length < 20) {
							vm.loadmore = false
						}
						ret.data.forEach(function (el) {
							vm.info.push(el)
						})
					}
				})
			},
			price_format: function (type, price) {
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			}
		},
		filters: {
			valueSlice(value) {
				return value.slice(0, 25) + '...'
			}
		},
	})
	apiready = function () {


		if ($api.getStorage('token')) {
			get_userinfo()
		}

		var temp_localcity = api.getPrefs({
			sync: true,
			key: 'localcity'
		});

		if (temp_localcity) {
			vm.localcity = JSON.parse(temp_localcity);
		}

		api.addEventListener({
			name: 'jobRefresh'
		}, function (ret, err) {
			localcity(function (ret) {
				if (ret) {
					vm.localcity = ret;
					vm.get_list()
				}
			})
		});

		vm.id = $api.getStorage('good_type_id');
		$api.rmStorage('good_type_id')
		vm.get_list()
		fnInitPullRefresh(function () {
			vm.page = 1;
			vm.loadmore = true
			vm.info = [];
			vm.get_list()
		})
		// 新版刷新
		refresh_new(function () {
			setTimeout(function () {
				vm.page = 1;
				vm.loadmore = true
				vm.info = [];
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})


		fnInitScrollToBottom(function () {
			vm.page++;
			vm.get_list()
		})
		add_event('goods_sign', function (ret) {
			vm.sign = ret.sign
			vm.page = 1;
			vm.loadmore = true
			vm.info = [];
			vm.get_list()
		})
	};

	function get_userinfo() {
		get_data('api/user/getUserInfo', {
			token: $api.getStorage('token')
		}, function (ret) {
			// console.log(JSON.stringify(ret))
			if (ret.status == 1) {
				vm.reg_type = ret.data.reg_type
				vm.is_vip = ret.data.is_vip
			}
		}, false)
	}
</script>

</html>